<m-card>
  <div card-head>
    <div>
      <button class="btn btn-sm btn-secondary" (click)="back()">返回上级</button>
    </div>
    <div>
      <ng-container *ngIf="brother$ | async as brother">
        <button
          class="btn btn-sm btn-secondary mr-3"
          *ngIf="brother.prev"
          [mDetailRouterLink]="{ id: brother.prev, type: 'web_message' }"
        >
          上一消息
        </button>
        <button
          class="btn btn-sm btn-secondary mr-3"
          *ngIf="brother.next"
          [mDetailRouterLink]="{ id: brother.next, type: 'web_message' }"
        >
          下一消息
        </button>
      </ng-container>
      <button class="btn btn-sm btn-outline-danger" (click)="delete()">删除</button>
    </div>
  </div>
  <div class="message" *ngIf="result$ | async as result">
    <div class="text-center">
      <h1>{{ result.message.title }}</h1>
    </div>
    <div class="subtitle">
      <ng-container *ngIf="status != WebMessageStatus.Sent; else senderRef">
        <span class="mr-3">发件人：{{ result.message?.sender?.full_name }} </span>
        <span>接收时间：{{ result.updated_at | date }}</span>
      </ng-container>
      <ng-template #senderRef>
        <span class="mr-3 receiver">
          收件人：
          <span *ngFor="let to of result.to">
            {{ to.receiver?.full_name }}
          </span>
        </span>
        <span>发送时间：{{ result.created_at | date }}</span>
      </ng-template>
    </div>
    <hr />
    <div [innerHTML]="html$ | async"></div>
  </div>
</m-card>
